<!--
 * @Author: diaowangtao
 * @Date: 2020-09-02 11:22:40
 * @Description: 调整参考资料
-->
<template>
<div style="padding-bottom:5rem;">
  <div class="page">
    <page-title :title="title" ></page-title>
    <div class="message">请选择在资产配置报告中展示的内容</div>
    <p class="title_bar">销售垫板（即"参考资料"）</p>
    <div class="content">
      <ul>
        <li v-for="(item, index) in subplatesData" :key="index">
          <span class="check_1" v-if="item.check == 1" @click="checkBoard('1', index)">√</span>
          <span class="check_1" v-else @click="checkBoard('0', index)"></span>
            {{item.content}}
        </li>
      </ul>
      <div class="select_all">
        <span class="check_2" v-if="selectAll" @click="checkAllBoard()">√</span>
        <span class="check_2" v-else @click="checkAllBoard()"></span>
        <span class="select_all_btn">全选</span>
      </div>
    </div>
    <div class="title_bar">自定义</div>
    <div class="textarea">
      <textarea name id class v-model="textVal" @focus="messageNoShow" @blur="messageShow" maxlength="1000"></textarea>
      <p v-show="messageIsShow==1">自定义编辑区域（不超过1000字）</p>
    </div>
    <mt-button class="bottom" size="large" @click="completeBoard()">调整完成</mt-button>
  </div>
</div>
</template>

<script>
import "./changeReference.less";
export default {
  name: "changeReference",
  components: {
    //头部导航
    pageTitle: resolve => require(["@src/common/pageTitle/pageTitle"], resolve)
  },
  data() {
    return {
      title: "调整销售垫板",
        messageIsShow: 1,
        textVal: "",
        subplatesData: [
            {content: '111', check: 1, id: 1},
            {content: '222', check: 1, id: 2},
            {content: '113331', check: 0, id: 3}
            ],
        selectAll: false,
        assetAllocationId: '111',
        isClick: true, // 防重复点击
    };
  },
  methods: {
      // 回显销售垫板数据
      getSubplatesData() {
          this.$axiosHttp.http({
              name:'获取销售垫板数据',
              url: apiUrl.getSubplateDetailsApi,
              needFailCallback: true,
              params: {assetAllocationId: this.assetAllocationId}
          }, (res) => {

              this.subplatesData = [
                  {content: '113331', check: 1}
              ];

              let count = 0;
              this.subplatesData.forEach(function (res) {
                  if (res.check == 1) {
                      count ++;
                  }
              })
              if (count == this.subplatesData.length) {
                  this.selectAll = true; // 全选状态
              } else {
                  this.selectAll = false;
              }

          }, (res) => {
              // 获取失败
              // tipAction(res.data.message);
          })
      },

      checkBoard(status, index) {
          // 改变当前点击数据的选中状态
          if ( status == '1') {
              this.subplatesData[index].check = 0;
          } else {
              this.subplatesData[index].check = 1;
          }

          // 检查改变状态后是否为全选状态
          let count = 0;
          this.subplatesData.forEach(function (res) {
              if (res.check == 1) {
                  count ++;
              }
          })
          if (count == this.subplatesData.length) {
              this.selectAll = true; // 全选状态
          } else {
              this.selectAll = false;
          }
      },

      checkAllBoard() {
          if (this.selectAll) {
              this.subplatesData.forEach(function (res) {
                  res.check = 0;
              })
              this.selectAll = false;
          } else {
              this.subplatesData.forEach(function (res) {
                  res.check = 1;
              })
              this.selectAll = true;
          }
      },

      // 调整完成，点击按钮 提交请求
      completeBoard() {
          if (!this.isClick) {
              return;
          }
          this.isClick = false;

          console.log(this.subplatesData);
          let sureArr = [];
          this.subplatesData.forEach(function (res) {
              if (res.check == 1) {
                  sureArr.push(res.id);
              }
          })

          console.log(sureArr);
          if (sureArr.length == 0 && this.textVal == '') {
              // 如果数据均为空的话，不向后台发送请求
              console.log('数据均为空');
              return;
          }
          return;
          this.$axiosHttp.http({
              name:'保存销售垫板',
              url: apiUrl.saveSubplatesApi,
              needFailCallback: true,
              params: {assetAllocationId: this.assetAllocationId, selfSubplate: this.textVal, subplates: sureArr}
          }, (res) => {

              this.isClick = true;

              if (res.status == '0000') {
                  // 如果请求成功 跳转回报告的编辑预览页面
              }

          }, (res) => {
              // 获取失败
              this.isClick = true;
              // tipAction(res.data.message);
          })

      },

    //模拟placeholder
    messageNoShow() {
      this.messageIsShow = 0;
    },
    messageShow() {
      if (this.textVal == "") {
        this.messageIsShow = 1;
      }
    }
  }
};
</script>

<style>
</style>
